<template>
    <div class="detail" v-if="show">

        <div id="detail" :class="detail_class">

            <!--S标题-->
            <h2>
                <span>卡券详情</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="$emit('close')"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--S卡券内容-->
            <div id="content">
                <cube-scroll>

                    <!--S卡券封面-->
                    <div class="cover" v-if="data.cover">
                        <img v-lazy="data.cover" />
                    </div>
                    <!--E卡券封面-->

                    <!--S卡券名称-->
                    <h4 :class="data.cover ? '' : 'none-cover'">{{data.name}}</h4>
                    <!--E卡券名称-->

                    <!--S卡券状态-->
                    <cube-button
                            v-if="data.status === '2'"
                            :inline="true">审核中
                    </cube-button>
                    <!--E卡券状态-->

                    <!--S类型-->
                    <p class="type" v-if="data.type !== 'qt'">
                        {{data.type_str}}：<span class="value">{{data.value}}</span>
                    </p>
                    <!--E类型-->

                    <!--S核销地址-->
                    <p class="address">
                        核销地址：{{data.address}}
                    </p>
                    <!--E核销地址-->

                    <!--S卡券时间-->
                    <p class="time">
                        {{data.time_str}}
                    </p>
                    <!--E卡券时间-->

                    <!--S卡券说明(核销规则)-->
                    <div class="explain">
                        <h5>说明(核销规则)：</h5>
                        <div class="content" v-html="data.detail"></div>
                    </div>
                    <!--E卡券详情(核销规则)-->

                </cube-scroll>
            </div>
            <!--E卡券内容-->

        </div>

    </div>
</template>

<script>
    export default {
        name: "detail",
        data() {
            return {
                // id 编辑区域class，控制打开关闭的动画
                detail_class: "close",
                // 卡券数据
                data: {}
            }
        },
        props: {
            // 区域显示状态
            show: {
                type: Boolean,
                default: false
            },
            // 卡券id
            coupon_id: {
                type: String,
                default: ''
            }
        },
        watch: {
            // 显示状态改变
            show() {
                this.toggle()
            }
        },
        methods: {
            /**
             * 显示隐藏区域
             */
            toggle() {
                if (this.show) {
                    this.get()
                    setTimeout(() => {
                        this.detail_class = 'open'
                    }, 100)
                } else {
                    this.detail_class = 'close'
                }
            },
            /**
             * 获取卡券详情
             */
            get() {
                this.$sendGet("coupon/" + this.coupon_id)
                    .then((res) => {
                        this.data = res.data.data
                    })
            }
        }
    }
</script>

<style scoped lang="less" src="./detail.less"></style>
